import React, { FC, useEffect } from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
import { fetchData, reset } from './a.reducer';
import { IRootState } from 'public/TS/store';
import { message } from 'antd';
import B from '../b';

const mapStateToProps = ({ stateA }: IRootState) => ({
    data: stateA.data,
    loading: stateA.loading
});
const mapDispatchToProps = {
    fetchData,
    reset
};
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

interface IProp extends StateProps, DispatchProps, RouteComponentProps {}

const A: FC<IProp> = (props) => {
    const { fetchData, loading, reset } = props;

    useEffect(() => {
        // fetchData('123');
        reset();
    }, []);

    useEffect(() => {
        if (loading) {
            message.loading({ content: 'Loading...' });
        }
    }, [loading]);
    return (
        <div>
            <B />
        </div>
    );
};

export default connect(mapStateToProps, mapDispatchToProps)(A);
